<template>
	<view class="sku">
		<u-icon name="close" color="#b3b3b3" class="close" @click="closeSku"></u-icon>
		<view class="sku-top">
			<image :src="skuShowInfo.img" class="sku-img" mode="aspectFill" @click="preview('skuImg',skuShowInfo.img)"></image>
			<view class="sku-info">
				<view class="sku-price">￥<text>{{skuShowInfo.price}}</text></view>
				<view class="contain" v-if="contain">商品包含：{{contain}}</view>
				<view class="sku-selected">
					已选：
					{{selectedShowArr[0]?selectedShowArr[0]:''}}<text v-if="selectedShowArr[0] && selectedShowArr[1]">、</text>
					{{selectedShowArr[1]?selectedShowArr[1]:''}}<text v-if="selectedShowArr[1] && selectedShowArr[2]">、</text>
					{{selectedShowArr[2]?selectedShowArr[2]:''}}
				</view>
				<view class="sku-number" v-if="skuShowInfo.lightSource">
					<text>
						<block v-if="isLightSouece==='含光源'">包含光源</block><block v-if="isLightSouece==='不含光源'">所需光源</block>：{{skuShowInfo.lightSource}}
					</text>
				</view>
			</view>
		</view>
		<view class="expire_time" v-if="expireTime">预计下架时间：{{expireTime}}</view>
		<view class="sku-list">
			<scroll-view scroll-y>
				<view class="sku-list-item number">
				  <view class="sku-name">数量 <text v-if="!isMerchant && !isLight">({{minsShowNumber}}件起购)</text></view>
					<view style="display: flex; align-items: center;">
						<text class="stock" style="margin-right: 20rpx; font-size: 24rpx; color: #999;" v-if="isLight">(库存：{{maxShowNumber}}件)</text>
						<u-number-box
							:min="minsShowNumber"
							:step="minsShowNumber"
							:max="maxShowNumber"
							v-model="skuShowInfo.number"
							:input-width="75" 
							:input-height="72" bg-color="#FFFFFF"
							@change="numberChange">
						</u-number-box>
					</view>
				</view>
				<view class="sku-list-item" v-for="(data,index) in skuShowList" :key="index">
	        <view class="sku-name">{{data.name}}</view>
	        <view class="sku-list-item-box" v-if="!spu">
	          <view v-for="(item,i) in data.list"
							@click="specificationBtn(item.name,index,$event,i)"
							:class="['sku-item',item.isShow?'':'gary',subShowIndex[index] == i?'active':'']" :key="i">
							{{item.name}}
						</view>
	        </view>
					<view class="sku-list-item-box" v-else>
						<view v-for="(item,i) in data.list"
							@click="specificationBtn(item.name,index,$event,i)"
							:class="['sku-item',subShowIndex[index] == i?'active':'']" :key="i">
							<!-- <image :src="item.img" mode="aspectFill"></image> -->
							<text>{{item.name}}</text>
						</view>
					</view>
	      </view>
			</scroll-view>
		</view>
		<view class="sku-btns">
			<block v-if="(actionType!=='join' && isSale!=2 && !isLight) || (actionType!=='join' && isSale!=2 && isLight)">
				<view class="add-car" @click="confirmAction('addCar')">加入购物车</view>
				<view class="add-car buy" @click="confirmAction('buy')">立即购买</view>
			</block>
			<block v-if="actionType==='join'">
				<view class="add-car" @click="confirmAction('join')">加入方案</view>
			</block>
			<view class="add-car add-car-no" v-if="isSale==2 && !isLight">此商品已下架</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			isLightSouece: {
				type: String,
				default: ''
			},
			contain: {
				type: String,
				default: ''
			},
			spu: {
				type: Boolean,
				default: false
			},
			expireTime: {
				type: String | Number,
				default: ''
			},
			isMatch: {
				type: Boolean,
				default: false
			},
			stock: {
				type: Number,
				default: 0
			},
			isLight: {
				type: Boolean,
				default: false
			},
			isSale: {
				type: Number,
				default: 1
			},
			isPack: {
				type: Boolean,
				default: false
			},
			isMerchant: {
				type: Boolean,
				default: false
			},
			skuInfo: {
				type: Object,
				default () {
					return {
						img: '',
						number: 1,
						price: ''
					}
				}
			},
			sku: {
				type: Array,
				default () {
					return []
				}
			},
			selectedArr: {
				type: Array,
				default () {
					return []
				}
			},
			shopItemInfo: {
				type: String,
				default: ''
			},
			skuList: {
				type: Array,
				default () {
					return []
				}
			},
			minsNumber: {
				type: Number,
				default: 1
			},
			subIndex: {
				type: Array,
				default () {
					return []
				}
			},
			actionType: {
				type: String,
				default: ''
			},
			goodsType: {
				type: [String,Number],
				default: ''
			}
		},
		watch: {
			skuInfo(newValue,oldValue){
				this.skuShowInfo = newValue
			},
			selectedArr(newValue,oldValue){
				this.selectedShowArr = newValue
				this.checkItem()
			},
			skuList(newValue,oldValue){
				this.skuShowList = newValue
				this.checkItem()
			},
			shopItemInfo(newValue,oldValue){
				this.shopShowItemInfo = JSON.parse(newValue)
				this.checkItem()
			},
			subIndex(newValue,oldValue){
				this.subShowIndex = newValue
				this.checkItem()
			}
		},
		data() {
			return {
				skuShowInfo: {
					img: '',
					number: 1,
					price: '',
					lightSource: ''
				},
				selectedShowArr: [],
				skuShowList: [],
				subShowIndex: [],
				shopShowItemInfo: [],
				minsShowNumber: 1,
				maxShowNumber: 999,
				numberChangeB: false
			};
		},
		methods: {
			numberChange(){
				this.numberChangeB = true
			},
			specificationBtn (item, n, event, index) {
				var self = this;
				if (self.selectedShowArr[n] != item) {
					self.selectedShowArr[n] = item;
					self.subShowIndex[n] = index;
				} else {
					self.selectedShowArr[n] = "";
					self.subShowIndex[n] = -1;
				}
				self.checkItem()
			},
			checkItem (type) {
				var option = this.skuShowList;
				var result = [];
				for (var i in option) {
					 result[i] = this.selectedShowArr[i] ? this.selectedShowArr[i] : '';
				}
				for (var i in option) {
					var last = result[i];
					for (var k in option[i].list) {
						result[i] = option[i].list[k].name;
						this.$set(option[i].list[k],'isShow',this.isMay(result))
					}
					result[i] = last;
				}
				this.$forceUpdate();
				if(!this.isMerchant){
					if(!this.spu){
						if(result[0] && result[1] && result[2]){
							if(this.shopShowItemInfo[result]){
								this.skuShowInfo.img = this.shopShowItemInfo[result].img
								this.skuShowInfo.price = this.shopShowItemInfo[result].retail_price
								this.skuShowInfo.sku_id = this.shopShowItemInfo[result].sku_id
								this.minsShowNumber = this.shopShowItemInfo[result].coefficient_num
								if(!type && !this.numberChangeB){
									this.skuShowInfo.number = this.shopShowItemInfo[result].coefficient_num
									console.log('赋值NUMBER')
								}
							}
						}
					}else{
						if(result[0]){
							this.skuShowInfo.img = this.shopShowItemInfo[result].img
							this.skuShowInfo.price = this.shopShowItemInfo[result].retail_price
							this.skuShowInfo.sku_id = this.shopShowItemInfo[result].sku_id
							this.minsShowNumber = this.shopShowItemInfo[result].coefficient_num
							if(!type && !this.numberChangeB){
								this.skuShowInfo.number = this.shopShowItemInfo[result].coefficient_num
								console.log('赋值NUMBER')
							}
						}
					}
				}else{
					if(result[0]){
						if(this.shopShowItemInfo[result]){
							if(this.isLight){
								this.maxShowNumber = this.shopShowItemInfo[result].enable_stock_
								this.skuShowInfo.img = this.shopShowItemInfo[result].img
								this.skuShowInfo.price = this.shopShowItemInfo[result].retail_price
								this.skuShowInfo.sku_id = this.shopShowItemInfo[result].sku_id
								this.skuShowInfo.lightSource = this.shopShowItemInfo[result].light_type_+' x '+this.shopShowItemInfo[result].power_
							}else{
								this.skuShowInfo.img = this.shopShowItemInfo[result].img
								if(Number(this.goodsType)==4){
									this.skuShowInfo.price = this.shopShowItemInfo[result].activity_price
								}else{
									this.skuShowInfo.price = this.shopShowItemInfo[result].retail_price
								}
								this.skuShowInfo.sku_id = this.shopShowItemInfo[result].sku_id
							}
						}
					}
				}
			},
			isMay (result) {
				var that = this;
				for (var i in result) {
					if (result[i] == '') {
						return true;
					}
				}
				if(this.isLight){
					return this.shopShowItemInfo[result].enable_stock_ !=0 ? true : false;
				}else{
					return this.shopShowItemInfo[result]? true : false;
				}
			},
			confirmAction(actionType){
				if(this.isSale==2){
					uni.showToast({
						icon: 'none',
						title: '商品已下架,无法购买'
					})
					return false
				}
				if(!this.isMerchant){
					if(!this.spu){
						if(!this.selectedShowArr[0]){
							uni.showToast({
								icon: 'none',
								title: '请选择颜色'
							})
							return false
						}else if(!this.selectedShowArr[1]){
							uni.showToast({
								icon: 'none',
								title: '请选择材质'
							})
							return false
						}else if(!this.selectedShowArr[2]){
							uni.showToast({
								icon: 'none',
								title: '请选择尺寸'
							})
							return false
						}
					}else{
						if(!this.selectedShowArr[0]){
							uni.showToast({
								icon: 'none',
								title: '请选择规格'
							})
							return false
						}
					}
					this.$emit('confirmAction',this.selectedShowArr,this.skuShowInfo,this.subShowIndex,actionType)
				}else{
					if(!this.selectedShowArr[0]){
						uni.showToast({
							icon: 'none',
							title: '请选择规格'
						})
						return false
					}
					this.$emit('confirmAction',this.selectedShowArr,this.skuShowInfo,this.subShowIndex,actionType)
				}
			},
			closeSku(){
				this.$emit('closeSku')
			},
			preview(type,current){
				let urls = []
				switch (type){
					case 'skuImg':
						urls.push(current)
				}
				uni.previewImage({
					current: current,
					urls: urls
				})
			},
		},
		mounted() {
			this.skuShowInfo = JSON.parse(JSON.stringify(this.skuInfo))
			this.selectedShowArr = this.selectedArr
			this.skuShowList = this.skuList
			if(this.stock){
				this.maxShowNumber = this.stock
			}
			if(this.shopItemInfo){
				this.shopShowItemInfo = JSON.parse(this.shopItemInfo)
			}
			this.subShowIndex = this.subIndex
			this.checkItem(1)
		}
	}
</script>

<style lang="scss">
	.sku{
		background-color: #FFF;
		position: relative;
		border-radius: 20rpx 20rpx 0 0;
		.sku-top{
			display: flex;
			align-items: center;
			background-color: #F5F5F5;
			padding: 30rpx;
			border-radius: 30rpx 30rpx 0 0;
			.sku-img{
				width: 180rpx;
				height: 180rpx;
				border-radius: 8rpx;
			}
			.sku-info{
				flex: 1;
				min-width: 0;
				margin-left: 40rpx;
			}
		}
		.close{
			position: absolute;
			right: 30rpx;
			top: 30rpx;
		}
		.sku-info{
			.contain{
				margin-top: 10rpx;
				font-size: 24rpx;
				color: #F59359;
			}
			.sku-price{
				font-weight: bold;
				color: #141414;
				font-size: 24rpx;
				text{
					font-size: 42rpx;
				}
			}
			.sku-selected{
				font-size: 24rpx;
				color: #757575;
				margin-top: 20rpx;
				line-height: 40rpx;
			}
			.sku-number{
				color: #909090;
				font-size: 20rpx;
				margin-top: 10rpx;
				.stock{
					margin-left: 30rpx;
				}
			}
			.expire_time{
				color: #f59359;
				font-size: 22rpx;
				margin-top: 10rpx;
			}
		}
		.expire_time{
			padding: 0 30rpx 30rpx;
			background-color: #F5F5F5;
			font-size: 24rpx;
		}
		.sku-list{
			scroll-view{
				height: 700rpx;
				padding: 30rpx 0;
			}
			.sku-list-item{
				margin-top: 30rpx;
				padding: 0 30rpx;
				&:first-child{
					margin-top: 0;
				}
				&.number{
					display: flex;
					align-items: center;
					justify-content: space-between;
				}
				.sku-name{
					font-size: 28rpx;
					font-weight: bold;
					text{
						font-weight: normal;
						margin-left: 20rpx;
						color: #999;
						font-size: 24rpx;
					}
				}
				.sku-list-item-box{
					display: flex;
					flex-wrap: wrap;
					.sku-item{
						display: flex;
						align-items: center;
						// min-height: 82rpx;
						// line-height: 68rpx;
						border: 2rpx solid rgba(242,242,242,1);
						border-radius: 4rpx;
						padding: 20rpx;
						margin: 30rpx 15rpx 0 0;
						color: #909090;
						font-size: 24rpx;
						&.spu{
							display: flex;
							flex-direction: column;
							width: 216rpx;
							border: solid 2rpx #EEE;
							border-radius: 6rpx;
							background-color: #F7F7F7;
							text-align: center;
							padding: 0;
							&.active{
								background-color: #FFF;
								text{
									color: #F59359;
								}
							}
							image{
								width: 212rpx;
								height: 212rpx;
							}
							text{
								text-align: left;
								padding: 10rpx;
								line-height: 30rpx;
								font-size: 20rpx;
							}
						}
						&.active{
							border-color: #F59359;
							color: #F59359;
							box-shadow: 5rpx 14rpx 30rpx 0px rgba(40,34,31,0.05);
						}
						&.gary{
							opacity: .3;
							pointer-events: none;
						}
					}
				}
			}
		}
		.sku-btns{
			display: flex;
			border-top: solid 2rpx #F2F2F2;
			margin: 0 -30rpx;
			padding: 15rpx 60rpx;
			view{
				height: 80rpx;
				line-height: 80rpx;
				font-size: 28rpx;
				color: #FFF;
				border-radius: 8rpx;
				flex: 1;
				text-align: center;
				&.add-car{
					background-color: #141414;
					color: #FFF;
				}
				&.add-car-no{
					opacity: .5;
				}
				&.buy{
					background-color: #F59359;
					margin-left: 20rpx;
					color: #FFF;
				}
			}
		}
	}
</style>